import styled from "./index.module.less";
import {
  LegacyCard,
  Button,
  Pagination,
  TextField,
} from "@shopify/polaris";

interface Props {
  pagenumber: number;
  setPagenumber: (pagenumber: number) => void;
  values: string;
  handleChanges: (newValue: string) => void;
  Product: Function;
}

const App = ({
  pagenumber,
  setPagenumber,
  values,
  handleChanges,
  Product,
}: Props) => {
  return (
    <div className={styled.pages}>
      <LegacyCard.Section>
        <div className={styled.children}>
          <div>共 {10} 条</div>
          <div className={styled.middle}>
            <Button>{String(10)}条/页</Button>
          </div>
          <div>
            <Pagination
              label={pagenumber}
              hasPrevious
              onPrevious={() => {
                setPagenumber(pagenumber - 1);
              }}
              hasNext
              onNext={() => {
                setPagenumber(pagenumber + 1);
              }}
            />
          </div>
          <div className={styled.pageright}>
            <div>前往</div>
            <div className={styled.Text}>
              <TextField
                label=""
                value={values}
                onChange={handleChanges}
                autoComplete="off"
              />
            </div>
            <div>页</div>
          </div>
        </div>
      </LegacyCard.Section>
    </div>
  );
};

export default App;
